<template>
  <div>
    <!-- :model标签开启双向数据绑定,:rules标签开启表单验证，ref指定表单名-->
    <el-form :model="templateForm" label-width="80px" :rules="templateFormRules" ref="templateForm">
      <el-form-item label="所属站点" prop="siteId">
        <el-select v-model="templateForm.siteId" placeholder="请选择站点">
          <el-option
            v-for="item in siteList"
            :key="item.siteId"
            :label="item.siteName"
            :value="item.siteId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="模板名称" prop="templateName">
        <el-input v-model="templateForm.templateName" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="模板参数" prop="templateParameter">
        <el-input v-model="templateForm.templateParameter" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="模板文件路径" prop="templateFilePath">
        <el-input v-model="templateForm.templateFilePath" auto-complete="off"></el-input>
      </el-form-item>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker type="datetime" placeholder="创建时间" v-model="templateForm.templateCreateTime">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="go_back">返回</el-button>
      <el-button type="primary" @click="addSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
    /*编写页面静态部分，即model及vm部分。*/
    //导入cmsApi中的所有接口
    import * as cmsApi from '../api/cms'

    //导出默认的VM
    export default {
        //View层数据的加载
        data() {
            return {
                //站点列表数据
                siteList: [],
                //新增模板界面表单数据
                templateForm: {
                    siteId: '',
                    templateName: '',
                    templateParameter: '',
                    templateFilePath: '',
                    templateCreateTime: new Date(),
                },
                //表单校验条件，校验提示信息
                templateFormRules: {
                    siteId: [
                        {required: true, message: '请选择站点', trigger: 'blur'}
                    ],
                    templateName: [
                        {required: true, message: '请输入模板名称', trigger: 'blur'}
                    ],
                    // templateParameter: [
                    //     {required: true, message: '请输入模板参数', trigger: 'blur'}
                    // ],
                    templateFilePath:[
                        {required: true, message: '请输入模板文件路径', trigger: 'blur'}
                    ]
                }
            }
        },
        //View层调用方法的实现
        methods: {
            //提交按钮调用的方法
            addSubmit: function () {
                //表单校验方法，若不满足校验条件，显示提示信息
                this.$refs['templateForm'].validate((valid) => {
                    //满足校验条件，提交成功
                    if (valid) {
                        //打开提示信息弹出框
                        this.$confirm('确认提交吗?', '提示', {}).then(() => {
                            //调用page_add接口，实现新增页面
                            cmsApi.template_add(this.templateForm).then((res) => {
                                console.log(res);
                                if (res.success) {
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    //提交成功之后，清空表单数据
                                    this.$refs['templateForm'].resetFields();
                                }
                                //提交失败，打印服务端传送的异常信息
                                else if (res.message) {
                                    this.$message.error(res.message);
                                } else {
                                    this.$message.error('提交失败');
                                }
                            });
                        });
                    }
                });
            },
            //返回按钮调用的方法
            go_back: function () {
                //设置访问路由
                this.$router.push({
                    //设置url
                    path: '/cms/template/list',
                    //设置url中携带的参数
                    query: {
                        page: this.$route.query.page,       //从当前url中获取数据
                        siteId: this.$route.query.siteId
                    }
                });
            },
            //获取站点列表的方法
            querySiteList: function () {
                cmsApi.site_list().then((res) => {
                    this.siteList = res.queryResult.list;
                })
            },
        },
        //使用钩子方法，实现在页面加载完成后便调用query()方法
        mounted() {
            //初始化站点列表
            this.querySiteList();
        }
    }
</script>

<style>
  /*编写页面样式，不是必须*/
</style>
